<script setup lang="ts">
import { IndexProps } from "@/views/home/components/types.ts";
import JsonEditorVue from "json-editor-vue";
import { useDark } from "@pureadmin/utils";
import { invoke } from "@tauri-apps/api/tauri";

defineOptions({
	name: "HomeSettingView",
});
const props = withDefaults(defineProps<IndexProps>(), {
	index: () => "",
});
const { isDark } = useDark();
const index = toRef(props, "index");

const jsonContent = reactive({
	settings: {},
	defaults: {},
});
const hasJsonFlag = ref(true);
const jsonChange = (value: any) => {
	console.log(value);
	// 实时保存
	jsonSave(value);
};
// 保存
const jsonSave = (value: any) => {
	jsonContent.settings = value.settings;
	jsonContent.defaults = value.defaults;
	hasJsonFlag.value = true;
};
// 出错
const hasError = () => {
	console.log("出现错误");
	hasJsonFlag.value = false;
};
const checkJson = () => {
	if (hasJsonFlag.value === false) {
		console.log("json校验失败");
		return false;
	} else {
		console.log("json校验成功");
		return true;
	}
};
watch(index, () => {
	getIndicesSettings();
});
// get_indices_settings
function getIndicesSettings() {
	invoke("get_indices_settings", { index: index.value }).then((res: any) => {
		jsonContent.settings = res[index.value].settings;
		jsonContent.defaults = res[index.value].defaults;
	});
}

onMounted(function () {
	getIndicesSettings();
});
</script>

<template>
	<div class="home-setting-view">
		<json-editor-vue
			:class="{ 'jse-theme-dark': isDark }"
			v-model="jsonContent"
			mode="text"
			:navigationBar="false"
			:statusBar="false"
			:mainMenuBar="false"
			:readOnly="true"
			@has-error="hasError"
			@json-change="jsonChange"
			@json-save="jsonSave"
		/>
	</div>
</template>

<style scoped lang="scss">
.home-setting-view {
	width: 100%;
	word-wrap: break-word;
	word-break: normal;
}
</style>
